<template>
  <div class="pokemon-detail-container">
    <!-- 左侧主色调区域 -->
    <div class="color-section primary-color" :style="{ background: primaryGradient }">
      <!-- 竖向标签页 -->
      <div class="vertical-tabs" :class="{ collapsed: isTabsCollapsed }">
        <div 
          class="tab-item"
          :class="{ active: activeTab === 'info' }"
          @click="setActiveTab('info')"
          v-show="!isTabsCollapsed"
        >
          <span class="tab-text">信息</span>
        </div>
        <div 
          class="tab-item"
          :class="{ active: activeTab === 'stats' }"
          @click="setActiveTab('stats')"
          v-show="!isTabsCollapsed"
        >
          <span class="tab-text">能力</span>
        </div>
        <div 
          class="tab-item"
          :class="{ active: activeTab === 'abilities' }"
          @click="setActiveTab('abilities')"
          v-show="!isTabsCollapsed"
        >
          <span class="tab-text">特性</span>
        </div>
        
        <!-- 展开/收起按钮 -->
        <div class="toggle-button" @click="toggleTabs">
          <el-icon class="toggle-icon">
            <ArrowRight v-if="isTabsCollapsed" />
            <ArrowLeft v-else />
          </el-icon>
        </div>
      </div>

      <!-- 内容展示区域 -->
      <div class="content-display-area">
        <!-- 信息内容 -->
        <div v-if="activeTab === 'info'" class="tab-content info-content">
          <div class="pokemon-header">
            <div class="pokemon-title-box">
              <div class="pokemon-name-section">
                <h1 class="pokemon-name large-text" :class="{ 'long-name': isLongName, 'very-long-name': isVeryLongName }">{{ pokemon.pokemonName || pokemon.name || '加载中...' }}</h1>
              </div>
              <div class="pokemon-meta-section">
                <div class="pokemon-number large-text">#{{ getPokemonNumber(pokemon) }}</div>
                <div class="pokemon-category large-text">{{ pokemon.category || '未知宝可梦' }}</div>
              </div>
            </div>
          </div>
          <div class="pokemon-type-info">
            <div class="pokemon-types">
              <span 
                v-for="type in pokemon.types" 
                :key="type.id"
                class="type-badge"
                :class="`type-${type.typeName}`"
              >
                {{ type.typeName }}
              </span>
            </div>
            <!-- 描述区域紧跟在属性div下方 -->
            <div class="pokemon-description-container below-types">
              <p class="pokemon-description large-description">
                {{ pokemon.description || '鐮刀盔（日文：カブトプス，英文：Kabutops）是岩石屬性/水屬性的甲殼寶可夢。' }}
              </p>
            </div>
          </div>
        </div>

        <!-- 能力内容 -->
        <div v-if="activeTab === 'stats'" class="tab-content stats-content">
          <h3 class="content-title">能力</h3>
          <div class="radar-chart-container">
            <svg class="radar-chart" viewBox="0 0 600 600" width="600" height="550">
              <!-- 背景网格 -->
              <g class="radar-grid">
                <!-- 六边形网格线 -->
                <polygon
                  v-for="level in [1, 2, 3, 4, 5]"
                  :key="`grid-${level}`"
                  :points="getHexagonPoints(300, 300, level * 40)"
                  fill="none"
                  stroke="rgba(255, 255, 255, 0.4)"
                  stroke-width="1.5"
                />
                <!-- 轴线 -->
                <g v-for="(stat, index) in statsData" :key="`axis-${index}`">
                  <line
                    :x1="300"
                    :y1="300"
                    :x2="getStatPoint(index, 200).x"
                    :y2="getStatPoint(index, 200).y"
                    stroke="rgba(255, 255, 255, 0.8)"
                    stroke-width="1.5"
                  />
                  <!-- 标签 -->
                  <text
                    :x="getLabelPosition(index).x"
                    :y="getLabelPosition(index).y"
                    fill="white"
                    :text-anchor="getLabelPosition(index).textAnchor"
                    :dominant-baseline="getLabelPosition(index).dominantBaseline"
                    class="stat-label"
                    font-size="18"
                    font-weight="700"
                  >
                    {{ stat.name }}
                  </text>
                  <!-- 数值 -->
                  <text
                    :x="getValuePosition(index).x"
                    :y="getValuePosition(index).y"
                    fill="rgba(255, 255, 255, 0.95)"
                    :text-anchor="getValuePosition(index).textAnchor"
                    :dominant-baseline="getValuePosition(index).dominantBaseline"
                    class="stat-value-text"
                    font-size="16"
                    font-weight="700"
                  >
                    {{ stat.value }}
                  </text>
                </g>
              </g>
              
              <!-- 数据区域 -->
              <polygon
                :points="getStatsPolygonPoints()"
                :fill="statsPolygonFill"
                :stroke="statsPolygonStroke"
                stroke-width="3"
                opacity="0.8"
                class="stats-polygon"
              />
              
              <!-- 数据点 -->
              <circle
                v-for="(stat, index) in statsData"
                :key="`point-${index}`"
                :cx="getStatPoint(index, getStatRadius(stat.value)).x"
                :cy="getStatPoint(index, getStatRadius(stat.value)).y"
                r="5"
                :fill="statsPolygonStroke"
                stroke="white"
                stroke-width="3"
                class="stat-point"
              />
            </svg>
          </div>
        </div>

        <!-- 特性内容 -->
        <div v-if="activeTab === 'abilities'" class="tab-content abilities-content">
          <h3 class="content-title">特性</h3>
          <div class="ability-item large-ability" v-if="pokemon.ability1">
            <div class="ability-name large-ability-name">{{ pokemon.ability1 }}</div>
            <div class="ability-description large-ability-description">{{ pokemon.ability1Description || '暂无描述' }}</div>
          </div>
          <div class="ability-item large-ability" v-if="pokemon.hiddenAbility">
            <div class="ability-name hidden large-ability-name">{{ pokemon.hiddenAbility }} <span class="hidden-tag">(隐藏)</span></div>
            <div class="ability-description large-ability-description">{{ pokemon.hiddenAbilityDescription || '暂无描述' }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 右侧次要色调区域 -->
    <div class="color-section secondary-color" :style="{ background: secondaryGradient }">
      <div class="pokemon-list-container">

        <!-- 使用Elementplus组件库——滚动条组件，显示宝可梦列表滚动区域 -->
        <div class="pokemon-scroll-list" @wheel.prevent="handlePokemonScroll($event.deltaY)">
          <div 
            v-for="pokemonItem in visiblePokemonList" 
            :key="pokemonItem.id"
            :class="[
              'pokemon-list-item',
              { 'current': pokemonItem.isCurrent }
            ]"
            @click="goToPokemon(pokemonItem.id)"
            :title="`点击跳转到${pokemonItem.pokemonName || pokemonItem.name} (ID: ${pokemonItem.id})`"
          >
            <div class="pokemon-item-content">
              <div class="pokemon-avatar">
                <img 
                  :src="getPokemonImage(pokemonItem)" 
                  :alt="pokemonItem.pokemonName || pokemonItem.name"
                  @error="handleImageError"
                />
              </div>
              <div class="pokemon-item-info">
                <span class="pokemon-number">#{{ getPokemonNumber(pokemonItem) }}</span>
                <span class="pokemon-name">{{ pokemonItem.pokemonName || pokemonItem.name }}</span>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
    
    <!-- 中央宝可梦图片展示 -->
    <div class="center-pokemon-display">
      <div class="pokemon-showcase">
        <img 
          :src="getPokemonImage(pokemon)" 
          :alt="pokemon.pokemonName || pokemon.name"
          class="showcase-image"
          @error="handleImageError"
          @load="onImageLoad"
        >
      </div>
    </div>
    
    <!-- 返回按钮 -->
    <div class="back-button-container">
      <el-button 
        size="large" 
        @click="goBack"
        class="back-button"
      >
        <el-icon><ArrowLeft /></el-icon>
        返回列表
      </el-button>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-content">
        <div class="pokeball-loading">
          <div class="pokeball">
            <div class="pokeball-top"></div>
            <div class="pokeball-bottom"></div>
            <div class="pokeball-center"></div>
          </div>
        </div>
        <p>正在加载宝可梦数据...</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { getAllPokemon, getMockPokemonList } from '../api/pokemon.api'

const route = useRoute()
const router = useRouter()

// 响应式数据
const pokemon = ref({})
const loading = ref(false)
const activeTab = ref('info')
const isTabsCollapsed = ref(false)
const primaryColor = ref({ r: 120, g: 200, b: 80 })
const secondaryColor = ref({ r: 168, g: 216, b: 168 })

// 新增：宝可梦列表相关数据
const allPokemonList = ref([])
const currentPokemonIndex = ref(0)
const visiblePokemonList = ref([])

// 宝可梦图片位置相关数据
const pokemonImageBounds = ref({
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  width: 0,
  height: 0
})

// 计算属性
const primaryGradient = computed(() => {
  const { r, g, b } = primaryColor.value
  const lighterR = Math.min(255, r + 40)
  const lighterG = Math.min(255, g + 40)
  const lighterB = Math.min(255, b + 40)
  return `linear-gradient(135deg, rgb(${r}, ${g}, ${b}) 0%, rgb(${lighterR}, ${lighterG}, ${lighterB}) 100%)`
})

const secondaryGradient = computed(() => {
  const { r, g, b } = secondaryColor.value
  const lighterR = Math.min(255, r + 40)
  const lighterG = Math.min(255, g + 40)
  const lighterB = Math.min(255, b + 40)
  return `linear-gradient(135deg, rgb(${r}, ${g}, ${b}) 0%, rgb(${lighterR}, ${lighterG}, ${lighterB}) 100%)`
})

// 雷达图相关计算属性
const statsData = computed(() => [
  { name: 'HP', value: pokemon.value.hp || 0 },
  { name: '攻击', value: pokemon.value.attack || 0 },
  { name: '防御', value: pokemon.value.defense || 0 },
  { name: '特攻', value: pokemon.value.spAttack || 0 },
  { name: '特防', value: pokemon.value.spDefense || 0 },
  { name: '速度', value: pokemon.value.speed || 0 }
])

const statsPolygonFill = computed(() => {
  const { r, g, b } = primaryColor.value
  return `rgba(${r}, ${g}, ${b}, 0.8)`
})

// 检测宝可梦名称是否过长
const isLongName = computed(() => {
  const name = pokemon.value.pokemonName || pokemon.value.name || ''
  return name.length > 5 // 超过5个字符认为是长名称
})

// 检测是否为超长名称（需要更多压缩）
const isVeryLongName = computed(() => {
  const name = pokemon.value.pokemonName || pokemon.value.name || ''
  return name.length > 7 // 超过7个字符认为是超长名称
})

const statsPolygonStroke = computed(() => {
  const { r, g, b } = primaryColor.value
  return `rgb(${r}, ${g}, ${b})`
})

// 动态计算描述区域的样式，避免与宝可梦图片重叠
const descriptionContainerStyle = computed(() => {
  const safetyMargin = 50 // 安全距离（像素）
  const bounds = pokemonImageBounds.value
  
  // 基础样式
  const baseStyle = {
    background: 'transparent',
    border: 'none',
    boxShadow: 'none',
    backdropFilter: 'none'
  }
  
  // 如果图片位置信息可用，计算避让位置
  if (bounds.width > 0 && bounds.height > 0) {
    // 计算图片在视窗中的位置（考虑transform: translate(-50%, -50%)）
    const viewportWidth = window.innerWidth || 1920
    const viewportHeight = window.innerHeight || 1080
    
    // 图片中心位置（left: 67%, top: 50%）
    const imageCenterX = viewportWidth * 0.67
    const imageCenterY = viewportHeight * 0.5
    
    // 图片实际占用区域
    const imageLeft = imageCenterX - bounds.width / 2
    const imageRight = imageCenterX + bounds.width / 2
    const imageTop = imageCenterY - bounds.height / 2
    const imageBottom = imageCenterY + bounds.height / 2
    
    // 描述区域放在左侧，确保不与图片重叠
    const maxWidth = Math.max(300, imageLeft - safetyMargin * 2)
    
    return {
      ...baseStyle,
      maxWidth: `${maxWidth}px`,
      marginRight: `${safetyMargin}px`,
      width: 'auto'
    }
  }
  
  // 默认样式
  return {
    ...baseStyle,
    maxWidth: '600px',
    width: 'auto'
  }
})

// 获取宝可梦数据
const fetchPokemonData = async () => {
  try {
    loading.value = true
    const pokemonId = route.params.id
    
    let response
    
    // 优先尝试从后端API获取数据
    try {
      response = await getAllPokemon()
    } catch (apiError) {
      // 移除了控制台提示
      // 如果后端不可用，使用模拟数据
      response = await getMockPokemonList()
    }
    
    let pokemonData = null
    let pokemonList = []
    
    if (Array.isArray(response)) {
      pokemonList = response
      pokemonData = response.find(p => p.id.toString() === pokemonId)
    } else if (response && response.data && Array.isArray(response.data)) {
      pokemonList = response.data
      pokemonData = response.data.find(p => p.id.toString() === pokemonId)
    }
    
    // 设置所有宝可梦列表
    allPokemonList.value = pokemonList
    
    // 找到当前宝可梦在列表中的索引
    const currentIndex = pokemonList.findIndex(p => p.id.toString() === pokemonId)
    if (currentIndex !== -1) {
      currentPokemonIndex.value = currentIndex
      updateVisiblePokemonList()
    }
    
    if (pokemonData) {
      pokemon.value = pokemonData
      extractColorsFromPokemon(pokemonData)
    } else {
      // 移除了控制台提示
      pokemon.value = {
        pokemonName: '未知宝可梦',
        description: '无法加载宝可梦数据',
        types: []
      }
    }
  } catch (error) {
    // 移除了控制台提示
    pokemon.value = {
      pokemonName: '加载失败',
      description: '无法连接到服务器',
      types: []
    }
  } finally {
    loading.value = false
  }
}

// 颜色提取类 - 参考pokemon-theme-generator
class ColorExtractor {
  constructor() {
    this.canvas = document.createElement('canvas')
    this.ctx = this.canvas.getContext('2d')
  }

  // 从图片中提取主要颜色
  async extractColors(imageElement, colorCount = 5) {
    return new Promise((resolve) => {
      const img = new Image()
      img.crossOrigin = 'anonymous'
      
      img.onload = () => {
        this.canvas.width = img.width
        this.canvas.height = img.height
        this.ctx.drawImage(img, 0, 0)
        
        const imageData = this.ctx.getImageData(0, 0, img.width, img.height)
        const pixels = imageData.data
        const colors = this.analyzeColors(pixels, colorCount)
        resolve(colors)
      }
      
      img.src = imageElement.src
    })
  }

  // 分析颜色数据
  analyzeColors(pixels, colorCount) {
    const colorMap = new Map()
    const step = 4 // RGBA
    
    for (let i = 0; i < pixels.length; i += step * 10) {
      const r = pixels[i]
      const g = pixels[i + 1]
      const b = pixels[i + 2]
      const a = pixels[i + 3]
      
      if (a < 128) continue // 跳过透明像素
      
      const quantizedColor = this.quantizeColor(r, g, b, 32)
      const colorKey = `${quantizedColor.r},${quantizedColor.g},${quantizedColor.b}`
      
      colorMap.set(colorKey, (colorMap.get(colorKey) || 0) + 1)
    }
    
    return Array.from(colorMap.entries())
      .sort((a, b) => b[1] - a[1])
      .slice(0, colorCount)
      .map(([colorKey]) => {
        const [r, g, b] = colorKey.split(',').map(Number)
        return { r, g, b }
      })
  }

  // 颜色量化
  quantizeColor(r, g, b, factor) {
    return {
      r: Math.round(r / factor) * factor,
      g: Math.round(g / factor) * factor,
      b: Math.round(b / factor) * factor
    }
  }

  // 计算颜色亮度
  getLuminance(r, g, b) {
    const [rs, gs, bs] = [r, g, b].map(c => {
      c = c / 255
      return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
    })
    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
  }

  // 选择最佳的主色调和次色调
  selectBestColors(colors) {
    if (colors.length < 2) {
      return {
        primary: colors[0] || { r: 120, g: 200, b: 80 },
        secondary: colors[0] || { r: 168, g: 216, b: 168 }
      }
    }

    const colorWithMetrics = colors.map(color => {
      const { r, g, b } = color
      const max = Math.max(r, g, b)
      const min = Math.min(r, g, b)
      const saturation = max === 0 ? 0 : (max - min) / max
      const luminance = this.getLuminance(r, g, b)
      
      return {
        ...color,
        saturation,
        luminance,
        score: saturation * 0.7 + (1 - Math.abs(luminance - 0.5)) * 0.3
      }
    })

    colorWithMetrics.sort((a, b) => b.score - a.score)
    const primary = colorWithMetrics[0]
    
    let secondary = colorWithMetrics[1]
    let maxDifference = 0
    
    for (let i = 1; i < colorWithMetrics.length; i++) {
      const color = colorWithMetrics[i]
      const difference = Math.abs(color.luminance - primary.luminance) + 
                       Math.abs(color.saturation - primary.saturation)
      
      if (difference > maxDifference) {
        maxDifference = difference
        secondary = color
      }
    }

    return { primary, secondary }
  }
}

// 从宝可梦数据提取主题色
const extractColorsFromPokemon = async (pokemonData) => {
  if (!pokemonData) return
  
  console.log('开始提取颜色，宝可梦数据:', pokemonData)
  
  // 获取宝可梦编号
  const pokemonNumber = parseInt(getPokemonNumber(pokemonData))
  console.log('宝可梦编号:', pokemonNumber)
  
  // 宝可梦数据配置 - 参考pokemon-theme-generator
  const pokemonColorData = {
    1: { colors: ['#78C850', '#A8D8A8'] }, // 妙蛙种子
    2: { colors: ['#78C850', '#A8D8A8'] }, // 妙蛙草
    3: { colors: ['#78C850', '#A8D8A8'] }, // 妙蛙花
    4: { colors: ['#F08030', '#FFCC33'] }, // 小火龙  
    5: { colors: ['#F08030', '#FFCC33'] }, // 火恐龙
    6: { colors: ['#F08030', '#A890F0'] }, // 喷火龙
    7: { colors: ['#6890F0', '#A8D8F0'] }, // 杰尼龟
    8: { colors: ['#6890F0', '#A8D8F0'] }, // 卡咪龟
    9: { colors: ['#6890F0', '#A8D8F0'] }, // 水箭龟
    25: { colors: ['#F8D030', '#F0C040'] }, // 皮卡丘
    26: { colors: ['#F8D030', '#F0C040'] }, // 雷丘
    150: { colors: ['#F85888', '#C8A8F0'] }, // 超梦
    151: { colors: ['#FF6EC7', '#FFB3E6'] }, // 梦幻
    // 更多宝可梦...
  }
  
  // 如果有预设颜色，使用预设
  if (pokemonColorData[pokemonNumber]) {
    console.log('使用预设颜色:', pokemonColorData[pokemonNumber])
    const colors = pokemonColorData[pokemonNumber].colors
    primaryColor.value = hexToRgb(colors[0])
    secondaryColor.value = hexToRgb(colors[1])
    return
  }
  
  // 尝试从图片提取颜色
  try {
    const pokemonImage = document.querySelector('.showcase-image')
    if (pokemonImage && pokemonImage.complete) {
      const extractor = new ColorExtractor()
      const colors = await extractor.extractColors(pokemonImage, 5)
      const { primary, secondary } = extractor.selectBestColors(colors)
      
      primaryColor.value = primary
      secondaryColor.value = secondary
      return
    }
  } catch (error) {
    // 移除了控制台提示
  }
  
  // 备用方案：根据属性设置颜色
  const typeColorMap = {
    '草': { r: 120, g: 200, b: 80 },
    '火': { r: 240, g: 128, b: 48 },
    '水': { r: 104, g: 144, b: 240 },
    '电': { r: 248, g: 208, b: 48 },
    '一般': { r: 168, g: 168, b: 120 },
    '格斗': { r: 192, g: 48, b: 40 },
    '毒': { r: 160, g: 64, b: 160 },
    '地面': { r: 224, g: 192, b: 104 },
    '飞行': { r: 168, g: 144, b: 240 },
    '超能力': { r: 248, g: 88, b: 136 },
    '虫': { r: 168, g: 184, b: 32 },
    '岩石': { r: 184, g: 160, b: 56 },
    '幽灵': { r: 112, g: 88, b: 152 },
    '龙': { r: 112, g: 56, b: 248 },
    '恶': { r: 112, g: 88, b: 72 },
    '钢': { r: 184, g: 184, b: 208 },
    '妖精': { r: 238, g: 153, b: 172 },
    '冰': { r: 152, g: 216, b: 216 }
  }
  
  const primaryType = pokemonData.types[0]?.typeName
  const secondaryType = pokemonData.types[1]?.typeName
  
  if (primaryType && typeColorMap[primaryType]) {
    primaryColor.value = typeColorMap[primaryType]
  }
  
  if (secondaryType && typeColorMap[secondaryType]) {
    secondaryColor.value = typeColorMap[secondaryType]
  } else if (primaryType && typeColorMap[primaryType]) {
    const primary = typeColorMap[primaryType]
    secondaryColor.value = {
      r: Math.min(255, primary.r + 30),
      g: Math.min(255, primary.g + 30),
      b: Math.min(255, primary.b + 30)
    }
  }
}

// 十六进制转RGB
const hexToRgb = (hex) => {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : { r: 0, g: 0, b: 0 }
}

// 工具函数
const getPokemonImage = (pokemon) => {
  if (pokemon.imageUrl || pokemon.image_url) {
    return pokemon.imageUrl || pokemon.image_url
  }
  const id = pokemon.id || pokemon.number
  return `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${id}.png`
}

const getPokemonNumber = (pokemon) => {
  const number = pokemon.number || pokemon.id
  return number ? number.toString().padStart(3, '0') : '000'
}

const getStatPercentage = (statValue) => {
  const maxStat = 255 // 宝可梦种族值最大值
  return Math.min(100, (statValue / maxStat) * 100)
}

// 雷达图相关方法
const getStatPoint = (index, radius) => {
  const angle = (index * 60 - 90) * (Math.PI / 180) // 每60度一个点，从顶部开始
  return {
    x: 300 + radius * Math.cos(angle),
    y: 300 + radius * Math.sin(angle)
  }
}

// 获取标签位置
const getLabelPosition = (index) => {
  const baseRadius = 240 // 标签距离中心的基础距离
  let adjustedRadius = baseRadius
  let textAnchor = 'middle'
  let dominantBaseline = 'middle'
  
  // 根据索引调整位置
  switch(index) {
    case 0: // HP - 往下靠近一点雷达图
      adjustedRadius = baseRadius - 15
      dominantBaseline = 'text-before-edge'
      break
    case 3: // 特攻 - 往上靠近一点雷达图
      adjustedRadius = baseRadius - 15
      dominantBaseline = 'text-after-edge'
      break
    default:
      break
  }
  
  const point = getStatPoint(index, adjustedRadius)
  return {
    x: point.x,
    y: point.y,
    textAnchor,
    dominantBaseline
  }
}

// 获取数值显示位置
const getValuePosition = (index) => {
  const labelPos = getLabelPosition(index)
  let x = labelPos.x
  let y = labelPos.y
  let textAnchor = 'start'
  let dominantBaseline = labelPos.dominantBaseline
  
  // 根据属性调整数值位置
  switch(index) {
    case 0: // HP - 数值放在HP的等高水平右边
      x = labelPos.x + 60
      textAnchor = 'start'
      break
    case 1: // 攻击 - 数值放在攻击的等高水平右边
      x = labelPos.x + 60
      textAnchor = 'start'
      break
    case 2: // 防御 - 数值放在防御的等高水平右边
      x = labelPos.x + 60
      textAnchor = 'start'
      break
    case 3: // 特攻 - 数值放在特攻的等高水平右边
      x = labelPos.x + 60
      textAnchor = 'start'
      break
    case 4: // 特防 - 数值放在特防的等高水平左边
      x = labelPos.x - 60
      textAnchor = 'end'
      break
    case 5: // 速度 - 数值放在速度的等高水平左边
      x = labelPos.x - 60
      textAnchor = 'end'
      break
  }
  
  return {
    x,
    y,
    textAnchor,
    dominantBaseline
  }
}

const getStatRadius = (statValue) => {
  const maxStat = 255 // 宝可梦种族值最大值
  const maxRadius = 200 // 雷达图最大半径
  return Math.min(maxRadius, (statValue / maxStat) * maxRadius)
}

const getHexagonPoints = (centerX, centerY, radius) => {
  const points = []
  for (let i = 0; i < 6; i++) {
    const angle = (i * 60 - 90) * (Math.PI / 180)
    const x = centerX + radius * Math.cos(angle)
    const y = centerY + radius * Math.sin(angle)
    points.push(`${x},${y}`)
  }
  return points.join(' ')
}

const getStatsPolygonPoints = () => {
  return statsData.value
    .map((stat, index) => {
      const point = getStatPoint(index, getStatRadius(stat.value))
      return `${point.x},${point.y}`
    })
    .join(' ')
}

const handleImageError = (event) => {
  // 移除了控制台提示
  // 设置默认的占位图片或隐藏图片
  event.target.style.display = 'none'
  // 或者使用一个网络上的默认图片
  // event.target.src = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/0.png'
}

// 图片加载完成处理
const onImageLoad = async (event) => {
  console.log('图片加载完成，尝试提取颜色')
  // 延迟一点确保图片完全渲染
  setTimeout(async () => {
    await extractColorsFromPokemon(pokemon.value)
  }, 100)
}

// 标签页切换方法
const setActiveTab = (tab) => {
  activeTab.value = tab
}

// 切换标签页展开/收起状态
const toggleTabs = () => {
  isTabsCollapsed.value = !isTabsCollapsed.value
}

const goBack = () => {
  router.push('/')
}

// 更新可见的宝可梦列表（当前宝可梦及上下各2个）
const updateVisiblePokemonList = () => {
  const total = allPokemonList.value.length
  if (total === 0) return
  
  const current = currentPokemonIndex.value
  const visible = []
  
  // 获取上下2个宝可梦，总共5个
  for (let i = -2; i <= 2; i++) {
    let index = current + i
    // 处理边界情况，循环列表
    if (index < 0) index = total + index
    if (index >= total) index = index - total
    
    const pokemon = allPokemonList.value[index]
    if (pokemon) {
      console.log('宝可梦数据:', pokemon) // 调试信息
      visible.push({
        ...pokemon,
        isCurrent: i === 0,
        offset: i
      })
    }
  }
  
  visiblePokemonList.value = visible
  console.log('可见宝可梦列表:', visible) // 调试信息
}

// 处理宝可梦列表滚动
const handlePokemonScroll = (direction) => {
  const total = allPokemonList.value.length
  if (total === 0) return
  
  if (direction > 0) {
    // 向下滚动
    currentPokemonIndex.value = (currentPokemonIndex.value + 1) % total
  } else {
    // 向上滚动
    currentPokemonIndex.value = currentPokemonIndex.value === 0 ? total - 1 : currentPokemonIndex.value - 1
  }
  
  updateVisiblePokemonList()
}

// 跳转到指定宝可梦
const goToPokemon = (pokemonId) => {
  console.log('=== 点击宝可梦跳转 ===')
  console.log('点击的宝可梦ID:', pokemonId)
  console.log('当前路由参数:', route.params.id)
  
  if (!pokemonId) {
    // 移除了控制台提示
    return
  }
  
  // 检查是否是当前宝可梦
  if (pokemonId.toString() === route.params.id) {
    console.log('点击的是当前宝可梦，无需跳转')
    return
  }
  
  console.log('开始路由跳转到:', `/pokemon/${pokemonId}`)
  router.push(`/pokemon/${pokemonId}`)
}

// 监听路由参数变化
watch(
  () => route.params.id,
  (newId, oldId) => {
    if (newId && newId !== oldId) {
      console.log('路由参数变化:', { oldId, newId })
      fetchPokemonData()
      // 不需要重新加载整个列表，只需要更新可见列表
      updateVisiblePokemonList()
    }
  }
)

// 生命周期
onMounted(() => {
  console.log('组件挂载，开始加载数据')
  fetchPokemonData()
})
</script>

<style scoped>
/* 重置样式和基础设置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pokemon-detail-container {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: relative;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* 颜色区域基础样式 */
.color-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.color-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  opacity: 0.9;
  z-index: 1;
}

.color-section > * {
  position: relative;
  z-index: 2;
}

/* 主色调区域 */
.primary-color {
  background: linear-gradient(135deg, #78C850 0%, #A8D8A8 100%);
  flex: 1.55; /* 增加到1.55，将交界处向右移动15% */
}

/* 次要色调区域 */
.secondary-color {
  background: linear-gradient(135deg, #A8D8A8 0%, #C8E8C8 100%);
  flex: 0.45; /* 减少到0.45，配合左侧区域的增加实现交界处右移15% */
  padding-left: 8rem; /* 增加左侧内边距，让导航栏往右移动10% */
}

/* 左侧区域布局调整 */
.primary-color {
  flex-direction: row;
  gap: 0;
  padding: 0;
  overflow: visible; /* 确保按钮可见 */
}

/* 竖向标签页样式 */
.vertical-tabs {
  width: 80px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 2rem 0.5rem 2rem 1rem; /* 保持原有的内边距 */
  background: transparent; /* 完全透明背景 */
  backdrop-filter: none; /* 移除模糊效果 */
  border-right: none; /* 移除右边框 */
  transition: all 0.3s ease;
  position: relative;
  /* 为按钮预留空间，防止溢出 */
  margin-right: 60px;
}

.vertical-tabs.collapsed {
  width: 40px;
  padding: 1rem 0.5rem;
  /* 收起状态下也需要为按钮预留空间 */
  margin-right: 60px;
}

.tab-item {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 1rem 0.8rem; /* 增加左右内边距，给按钮留出更多空间 */
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: transparent; /* 透明背景 */
  backdrop-filter: none; /* 移除模糊效果 */
  border: 1px solid rgba(255, 255, 255, 0.8); /* 保留淡边框 */
  position: relative;
  overflow: hidden;
}

.tab-item:hover {
  background: rgba(255, 255, 255, 0.05); /* 极淡的背景 */
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.tab-item.active {
  background: rgba(255, 255, 255, 0.1); /* 稍微明显一点的背景 */
  transform: translateX(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}

.tab-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgba(255, 255, 255, 0.8);
}

.tab-text {
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  user-select: none;
}

/* 内容展示区域 */
.content-display-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  max-width: calc(100% - 80px);
  transition: all 0.3s ease;
}

/* 当标签页收起时调整内容区域 */
.vertical-tabs.collapsed + .content-display-area {
  max-width: calc(100% - 40px);
}

.tab-content {
  width: 100%;
  max-width: 800px; /* 增加最大宽度以适应新的描述区域 */
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 切换按钮样式 */
.toggle-button {
  position: absolute;
  top: 50%;
  right: -55px; /* 展开状态下的位置，确保与标签内容保持安全距离 */
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.15); /* 增加背景可见度 */
  border: 2px solid rgba(255, 255, 255, 0.8); /* 增强边框 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px); /* 添加模糊效果 */
  z-index: 100; /* 大幅提高z-index */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 添加阴影增强可见性 */
}

/* 收起状态下按钮位置调整 */
.vertical-tabs.collapsed .toggle-button {
  right: -50px; /* 收起状态下保持一致的外移距离，确保完全可见 */
  background: rgba(255, 255, 255, 0.15); /* 与展开状态保持一致的背景 */
  border-color: rgba(255, 255, 255, 0.8); /* 与展开状态保持一致的边框 */
  width: 32px; /* 与展开状态保持一致的尺寸 */
  height: 32px;
  /* 确保收起状态下按钮有优先的点击层级 */
  z-index: 200;
}

.toggle-button:hover {
  background: rgba(255, 255, 255, 0.8); /* 悬停时更明显的背景 */
  transform: translateY(-50%) scale(1.15); /* 更明显的缩放效果 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8); /* 更强的阴影 */
  border-color: rgba(255, 255, 255, 0.9); /* 悬停时边框更明显 */
}

/* 收起状态下的hover效果 */
.vertical-tabs.collapsed .toggle-button:hover {
  background: rgba(255, 255, 255, 0.8); /* 与展开状态保持一致的hover背景 */
  transform: translateY(-50%) scale(1.15); /* 与展开状态保持一致的缩放 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8); /* 与展开状态保持一致的阴影 */
  border-color: rgba(255, 255, 255, 0.9); /* 与展开状态保持一致的边框 */
}

.toggle-icon {
  color: white;
  font-size: 16px; /* 增大图标尺寸 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); /* 增强阴影 */
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 收起状态下的图标样式 */
.vertical-tabs.collapsed .toggle-icon {
  font-size: 16px; /* 与展开状态保持一致的图标尺寸 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); /* 与展开状态保持一致的阴影 */
}

/* 右侧占位内容样式 */
.placeholder-content {
  color: white;
  text-align: center;
  padding: 2rem;
}

.placeholder-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.placeholder-content p {
  font-size: 1rem;
  opacity: 0.8;
  line-height: 1.6;
}

/* 宝可梦信息区域 */
.pokemon-info {
  max-width: 500px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  animation: fadeInUp 0.8s ease-out;
}

/* 宝可梦头部布局 */
.pokemon-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
  width: 100%;
}

.pokemon-title-box {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 名称和右侧信息的间隔 */
  flex: 1;
  width: 100%;
  min-height: 80px; /* 确保有足够高度 */
}

.pokemon-name-section {
  /* 不使用flex弹性布局，让宽度自适应内容 */
  display: inline-block; /* 宽度自适应内容 */
  min-width: 0;
  max-width: 70%; /* 防止名称占用过多空间，为右侧信息预留空间 */
}

.pokemon-name {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  white-space: nowrap; /* 强制单行显示，不换行 */
  text-shadow: none; /* 移除宝可梦名称的阴影 */
  /* 宽度自适应内容，不设置固定宽度 */
  display: inline-block;
  width: 100%; /* 在父容器内占满宽度 */
  /* 如果内容超出父容器，使用省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  /* 动态调整字体大小以适应长名称 */
  font-size: clamp(2rem, 4vw, 3.5rem); /* 响应式字体大小 */
}

/* 桌面端长名称处理 */
.pokemon-name.long-name {
  font-size: clamp(1.8rem, 3.5vw, 3rem); /* 长名称使用较小字体 */
  transform: scaleX(0.9); /* 轻微水平压缩 */
  transform-origin: left center;
}

/* 桌面端超长名称处理 */
.pokemon-name.very-long-name {
  font-size: clamp(1.6rem, 3vw, 2.5rem); /* 超长名称使用更小字体 */
  transform: scaleX(0.8); /* 更多水平压缩 */
  transform-origin: left center;
}

.pokemon-meta-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 改为左对齐，因为现在紧贴名称右侧 */
  justify-content: center;
  gap: 0.25rem;
  flex-shrink: 0; /* 不允许收缩 */
  /* 移除最小宽度限制，让宽度自适应内容 */
}

.pokemon-number {
  font-size: 1.8rem;
  font-weight: 700;
  opacity: 0.9;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-align: right; /* 右对齐 */
  white-space: nowrap; /* 不换行 */
}

.pokemon-category {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.8;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-align: right; /* 右对齐 */
  white-space: nowrap; /* 不换行 */
}

.pokemon-type-info {
  margin-bottom: 1.5rem;
}

.pokemon-types {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.type-badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  color: white; /* 属性文字设为白色 */
}

.pokemon-description {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.9;
}



/* 种族值详情区域 */
.pokemon-stats-detail {
  max-width: 400px;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

.stats-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  text-align: center;
}

.stats-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stat-name {
  min-width: 60px;
  font-weight: 600;
  font-size: 0.9rem;
}

.stat-bar {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  overflow: hidden;
}

.stat-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease-out;
}

.stat-fill.hp { background: #FF5959; }
.stat-fill.attack { background: #F5AC78; }
.stat-fill.defense { background: #FAE078; }
.stat-fill.sp-attack { background: #9DB7F5; }
.stat-fill.sp-defense { background: #A7DB8D; }
.stat-fill.speed { background: #FA92B2; }

.stat-value {
  min-width: 40px;
  text-align: right;
  font-weight: 700;
  font-size: 0.9rem;
}

/* 特性区域 */
.abilities-section {
  margin-top: 2rem;
}

.abilities-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}

.ability-item {
  background: rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.ability-name {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.ability-name.hidden {
  color: #FFD700;
}

.hidden-tag {
  font-size: 0.8rem;
  background: rgba(255, 215, 0, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  margin-left: 0.5rem;
}

.ability-description {
  font-size: 0.9rem;
  opacity: 0.9;
  line-height: 1.4;
}

/* 中央宝可梦展示区域 */
.center-pokemon-display {
  position: absolute;
  top: 50%;
  left: 67%; /* 从72%向左移5%到67% */
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
}

.pokemon-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all;
}

.showcase-image {
  width: 375px; /* 从395px缩小5%到375px */
  height: 375px; /* 从395px缩小5%到375px */
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.8));
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  animation: float 4s ease-in-out infinite;
}

.showcase-image:hover {
  transform: scale(1.05) rotate(2deg);
}



/* 返回按钮 */
.back-button-container {
  position: fixed;
  top: 2rem;
  left: 2rem;
  z-index: 200;
}

.back-button {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600;
  padding: 12px 20px !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.8) !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8);
  color: rgba(255, 255, 255, 1) !important;
  border-color: rgba(255, 255, 255, 0.9) !important;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  text-align: center;
  color: white;
}

.loading-content p {
  margin-top: 20px;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 精灵球加载动画 */
.pokeball-loading {
  display: inline-block;
}

.pokeball {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
  animation: pokeball-spin 2s linear infinite;
}

.pokeball-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  border-radius: 60px 60px 0 0;
  border: 3px solid #333;
  border-bottom: 2px solid #333;
}

.pokeball-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(135deg, #ffffff, #f8f9fa);
  border-radius: 0 0 60px 60px;
  border: 3px solid #333;
  border-top: 2px solid #333;
}

.pokeball-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 4px solid #333;
  border-radius: 50%;
  z-index: 10;
}

.pokeball-center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #333;
  border-radius: 50%;
}

@keyframes pokeball-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 动画效果 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .pokemon-detail-container {
    flex-direction: column;
  }
  
  .color-section {
    flex: none;
    height: 50vh;
  }
  
  .primary-color {
    flex: none;
    height: 60vh;
  }
  
  .secondary-color {
    flex: none;
    height: 40vh;
  }
  
  .pokemon-name {
    font-size: 2.5rem;
  }
  
  .center-pokemon-display {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 1rem 0;
  }
  
  .showcase-image {
    width: 270px; /* 从300px缩小10%到270px */
    height: 270px; /* 从300px缩小10%到270px */
  }
}

@media (max-width: 768px) {
  .color-section {
    padding: 1rem;
  }
  
  .pokemon-name {
    font-size: 2rem;
  }
  
  .pokemon-description {
    font-size: 1rem;
  }
  
  /* 移动端描述区域优化 */
  .pokemon-description-container {
    max-width: 100% !important;
    margin: 1.5rem 0 0 0 !important;
    padding: 1rem 1.5rem !important;
  }
  
  /* 移动端属性下方的描述区域 */
  .pokemon-description-container.below-types {
    max-width: 100% !important; /* 移动端占满宽度 */
    margin: 1rem 0 0 0 !important;
    padding: 0.8rem 0 !important;
  }
  
  /* 移动端大字体描述 */
  .pokemon-description.large-description {
    font-size: 1.3rem !important; /* 移动端适中字体 */
    line-height: 1.6 !important;
    color: rgba(0, 0, 0, 0.85) !important;
  }
  
  .enhanced-description {
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
  }
  
  /* 移动端宝可梦头部优化 */
  .pokemon-title-box {
    gap: 1rem !important; /* 移动端减少间隔 */
    min-height: 60px !important;
  }
  
  .pokemon-name-section {
    max-width: 65% !important; /* 移动端给名称区域更多空间 */
  }
  
  .pokemon-name {
    font-size: clamp(1.5rem, 6vw, 2.5rem) !important; /* 移动端响应式字体 */
    /* 移动端如果名称太长，允许适当缩放 */
    transform: scaleX(1);
    transform-origin: left center;
  }
  
  /* 超长名称的额外处理 */
  .pokemon-name.long-name {
    transform: scaleX(0.85); /* 水平压缩85% */
  }
  
  .pokemon-name.very-long-name {
    font-size: clamp(1.2rem, 5vw, 2rem) !important; /* 移动端超长名称更小字体 */
    transform: scaleX(0.75); /* 更多水平压缩 */
  }
  
  .pokemon-meta-section {
    /* 移动端也移除最小宽度限制，让宽度自适应内容 */
    align-items: flex-start !important; /* 确保左对齐 */
  }
  
  .pokemon-number {
    font-size: 1.4rem !important;
  }
  
  .pokemon-category {
    font-size: 0.9rem !important;
  }
  
  .showcase-image {
    width: 225px; /* 从250px缩小10%到225px */
    height: 225px; /* 从250px缩小10%到225px */
  }
  
  .stats-title {
    font-size: 1.5rem;
  }
  
  .back-button-container {
    top: 1rem;
    left: 1rem;
  }
}

/* 新增样式 - 放大字体 */
.large-text {
  font-size: 1.3em !important;
}

.pokemon-name.large-text {
  font-size: 4rem !important;
}

.pokemon-number.large-text {
  font-size: 2.2rem !important;
}

.pokemon-category.large-text {
  font-size: 1.3rem !important;
}

.large-description {
  font-size: 1.3rem !important;
  line-height: 1.8 !important;
}

/* 重新设计的描述区域样式 */
.pokemon-description-container {
  width: 100%;
  max-width: 800px; /* 增加最大宽度 */
  margin: 2rem auto 0 auto; /* 居中并增加上边距 */
  padding: 1.5rem 2rem; /* 增加内边距 */
  background: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
  border-radius: 15px; /* 圆角 */
  backdrop-filter: blur(10px); /* 毛玻璃效果 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 淡色边框 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 阴影 */
}

/* 紧跟属性div下方的描述区域样式 */
.pokemon-description-container.below-types {
  margin: 1.5rem 0 0 0; /* 上边距，左右边距为0 */
  max-width: 55%; /* 限制宽度，避免被右侧图片覆盖 */
  background: transparent; /* 透明背景 */
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 1rem 0; /* 只保留上下内边距 */
}

/* 在属性下方的描述文字样式 */
.pokemon-description.large-description {
  font-size: 1.6rem !important; /* 更大的黑色字体 */
  line-height: 1.7 !important;
  color: rgba(0, 0, 0, 0.9) !important; /* 深黑色文字 */
  margin: 0 !important;
  text-align: left;
  letter-spacing: 0.02em;
  font-weight: 500; /* 稍微加粗 */
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3); /* 淡色文字阴影增强可读性 */
}

.enhanced-description {
  font-size: 1.4rem !important; /* 更大的字体 */
  line-height: 1.8 !important; /* 增加行高 */
  color: rgba(255, 255, 255, 0.95) !important; /* 更明显的白色 */
  margin: 0 !important; /* 移除默认边距 */
  text-align: left; /* 左对齐 */
  letter-spacing: 0.02em; /* 增加字符间距 */
  font-weight: 400; /* 正常字重 */
}

/* 能力区域深色背景 */
.stats-content {
  background: rgba(0, 0, 0, 0.8) !important;
  border-radius: 20px !important;
  padding: 2rem !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8) !important;
}

/* 雷达图样式 */
.radar-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 2rem 0;
  padding: 2rem 1rem; /* 增加上下左右的空间 */
}

.radar-chart {
  max-width: 500px;
  max-height: 500px;
  width: 100%;
  height: auto;
}

.stats-polygon {
  transition: all 0.8s ease-out;
  animation: radarFadeIn 1.2s ease-out;
}

.stat-point {
  transition: all 0.5s ease-out;
  animation: pointFadeIn 1.5s ease-out;
}

.stat-point:hover {
  r: 6;
  transform-origin: center;
}

.stat-label {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  font-family: 'Arial', 'Microsoft YaHei', sans-serif;
}

.stat-value-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  font-family: 'Arial', 'Microsoft YaHei', sans-serif;
}

/* 特性区域大字体样式 */
.large-ability {
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.large-ability-name {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
}

.large-ability-effect {
  font-size: 1.2rem !important;
  line-height: 1.7 !important;
}

.large-ability-description {
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  margin-top: 0.8rem !important;
}

/* 响应式设计优化 */
@media (max-width: 1200px) {
  .color-section {
    flex-direction: column;
    height: auto;
  }
  
  .secondary-color {
    height: 50vh;
  }
  
  .center-pokemon-display {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin: 2rem 0;
  }
}

@media (max-width: 768px) {
  .color-section {
    padding: 1rem;
  }
  
  .showcase-image {
    width: 252px; /* 从280px缩小10%到252px */
    height: 252px; /* 从280px缩小10%到252px */
  }
}

/* 右侧宝可梦列表样式 */
.pokemon-list-container {
  width: 100%;
  height: 100%;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 280px; /* 减少最大宽度以适应右移 */
  margin: 0 auto;
}



.pokemon-scroll-list {
  width: 100%;
  height: 400px; /* 固定高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.pokemon-list-item {
  width: 100%;
  padding: 0.8rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  transform-origin: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.pokemon-list-item:not(.current) {
  opacity: 0.6;
  transform: scale(0.9);
}

.pokemon-list-item.current {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 255, 255, 0.2);
}

.pokemon-list-item:hover {
  opacity: 1;
  transform: scale(1.02);
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.pokemon-item-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pokemon-avatar {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pokemon-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pokemon-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.pokemon-number {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.6);
}

.pokemon-name {
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.7);
}



/* 响应式调整 */
@media (max-width: 1200px) {
  .pokemon-list-container {
    max-width: 250px;
    padding: 1.5rem 1rem;
  }
  
  .pokemon-scroll-list {
    height: 300px;
  }
  
  .pokemon-avatar {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 768px) {
  .pokemon-list-container {
    max-width: 200px;
    padding: 1rem;
  }
  
  .list-title {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }
  
  .pokemon-scroll-list {
    height: 250px;
  }
  
  .pokemon-name {
    font-size: 1rem;
  }
}
</style> 